// Copyright 2011 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/*
 * @fileoverview Templates for dialogs in the RPF console.
 *
 * @author ralphj@google.com (Julie Ralph)
 * @author jasonstredwick@google.com (Jason Stredwick)
 */


{namespace rpf.soy.Dialog}


/**
 * Creates the content for the export project dialog.
 */
{template .exportContent}
<div id="export-root" class="export-content-canvas">
  <div id="project-details-tab" class="goog-tab-bar">
    <div class="goog-tab goog-tab-selected" id="project-details-export">
      Export
    </div>
    <div class="goog-tab" id="project-details-import">
      Import
    </div>
    <div class="goog-tab" id="project-details-tests">
      Tests
    </div>
  </div>
  <div class="goog-tab-bar-clear">

  </div>
  <div class="goog-tab-content" id="project-details-content">
    <div id="project-details-export-content"
         class="project-details-content-tab">
      <table style="width:100%">
        <!-- The interface for managing the url/page map. -->
        <tr>
          <td>
            <h3 class="componentName">
              Class Mapping
            </h3>
            <div class="export-data" style="max-height:350px;overflow-y:auto;">
              <table style="width:100%">
                <thead>
                  <tr>
                    <th style="width:70%" class="export-table-data">
                      Url (substring match)
                    </th>
                    <th style="width:20%" class="export-table-data">
                      Class Name
                    </th>
                    <th style="text-align:right;">
                      <img id="export-add-class" width="18" height="18"
                           src="imgs/rpf/plus.png">
                    </th>
                  </tr>
                </thead>
                <tbody id="export-page-table-body">
                </tbody>
              </table>
            </div>
          </td>
        </tr>

        <!-- Java specific information. -->
        <tr>
          <td>
            <h3 class="componentName">
              Java Configuration
            </h3>
            <div>
              <table style="width:100%">
                <tr>
                  <td class="export-label">
                    Package Path
                  </td>
                  <td>
                    <input id="export-java-package-path" type="text"
                           style="width:100%">
                  </td>
                </tr>
                <tr>
                  <td class="export-label">
                    Interval in ms
                  </td>
                  <td>
                    <input id="export-java-interval" type="text"
                           style="width:100%">
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>
      <div id="export-button-save" value="Save" style="float:left;"
           title="Save project details."></div>

      <div id="export-button-export" value="Export"
           title="Export the project to your client."></div>
    </div>
    <div id="project-details-import-content" style="visible:hidden;"
         class="project-details-content-tab">
      <h3 class="componentName">
        Package Path
      </h3>
      <input id="import-java-package-path" type="text" style="width:100%">
      <div id="export-button-import" value="Import"
           title="Load data.rpf from disk using package path."
           style="padding-top:6px;"></div>
    </div>
    <div id="project-details-tests-content" style="visible:hidden;"
         class="project-details-content-tab">
      <h3 class="componentName">
        Tests
      </h3>
      <div id="export-test-data" class="export-data">
      </div>
      <div id="delete-tests-button">
      </div>
    </div>
  </div>
</div>
{/template}


/**
 * Generate the table of tests; one test per line.
 * @param tests
 */
{template .getTests}
<select id="project-details-tests-selector" multiple="multiple"
        style="height:250px" class="console-loaddialog-content-table-select">
  {foreach $test in $tests}
  <option value="{$test}" title="">{$test}</option>
  {/foreach}
</select>
{/template}


/**
 * Generate the table of url to page maps; one mapping per line.
 * @param url
 * @param name
 */
{template .getPageMap}
<table>
  <tr id="export-page-map-row">
    <td>
      <input style="width:100%;border:0;" type="text" value="{$url}">
    </td>
    <td>
      <input style="width:100%;border:0;" type="text" value="{$name}">
    </td>
    <td style="text-align:right;">
      <img id="export-page-map-close" width="18" height="18"
           src="imgs/rpf/dialog_close_box.gif">
    </td>
  </tr>
</table>
{/template}


/**
 * Creates the dropdown button.
 */
{template .getDropdownBtn}
<img src="imgs/rpf/downbtn.png">
{/template}


/**
 * Creates the play dialog main content.
 */
{template .playContent}
<div class="rpf-left-panel" id="rpf-multiple-test-selector">
  <select id="playdialog-tests" multiple="multiple"
          style="height:150px; width:150px;"
          class="console-loaddialog-content-table-select">
  </select>
  <div id="rpf-multiple-tests-info">
    <span id="finishedTestsNumber"></span>
    <span id="totalRunningTestsNumber"></span>
    <input type="image" src="imgs/rpf/dialog_close_box.gif" id="stopAllTests"
           title="Stop the current run" value="Stop All" />
  </div>
</div>
<div class="rpf-right-panel">
  <div id="playbackruntime">
    <input type="image" src="imgs/rpf/playall.png" id="playall">
    <input type="image" src="imgs/rpf/pause-disabled.png" id="playpause">
    <input type="image" src="imgs/rpf/playstep.png" id="playstep">
    <input type="image" src="imgs/rpf/playstop.png" id="playstop">
    <div id="playbackcurrentstepdiv">
      <input type="text" placeholder="pause at line #"
             id="playbackcurrentstep" size="10" />
    </div>
  </div>
  <div id="playbackstatus"></div>
  <div id="matchHtmlDiv"></div>
  <div id="choiceset"></div>
</div>
{/template}


/**
 * Create the settings dialog main content.
 */
{template .settingsContent}
    <ul>
      <li>
        <label for="playbackinterval">
          Playback Interval (sec)
        </label>
        <input type="text" id="playbackinterval" />
        <input type="button" value="ok" id="playbackintervalbutton" />
      </li>
      <li>
        <label for="defaulttimeout">
          Default timeout (seconds)
        </label>
        <input type="text" id="defaulttimeout" />
        <input type="button" value="ok" id="defaulttimeoutbutton" />
      </li>
      <li>
        <label for="whetherUseXpath">Take Screenshot</label>
        <input type="checkbox" id="whethertakescreenshot" />
      </li>
      <li>
        <label for="whetherUseXpath">Use Xpath?</label>
        <input type="checkbox" id="whetherUseXpath" />
      </li>
    </ul>
{/template}


/**
 * Creates the JS function dialog main content.
 */
{template .jsContent}
  <div id="rpf-console-js-functions-toolbar"
       style="height:30px;vertical-align:center;padding-top:5px;
              border-bottom:1px solid #CCC;">
    <div id="rpf-js-play-button"></div>
  </div>
  <div id="rpf-console-js-functions">
  </div>
{/template}


/**
 * Create the save dialog main content.
 * @param lastProject
 */
{template .saveContent}
  <form>
    <fieldset>
    <legend>Test Information</legend>
    <ul>
      <li>
        <label for="projectName">Project</label>
        <input type="text" name="projectName" id="projectName"
               value="{$lastProject}" autocomplete="off" />
      </li>
      <li>
        <label for="projectName">Test Name</label>
        <input type="text" name="testName" id="testName" />
      </li>
    </ul>
    <legend>Location</legend>
    <ul>
      <li>
        <input type="radio" name="saveLocation" id="localBox">
        <label for="localBox">
          <span>Local</span>
          <span class="option-note"> (your browser's local storage)</span>
        </label>
      </li>
      <li>
        <input type="radio" name="saveLocation" id="webBox" checked>
        <label for="webBox">
          <span>Web</span>
          <span class="option-note"> (the cloud for sharing)</span>
        </label>
      </li>
    </ul>
    </fieldset>
  </form>
{/template}


/**
 * Create the screenshot dialog main content.
 * @param screenshots
 */
{template .screenshotContent}
  <div id="rpf-screenshots" class="centered-div">
    {foreach $screenshotUrl in $screenshots}
    <a href="{$screenshotUrl}" target="_blank">
      <img src="{$screenshotUrl}" width="80%">
    </a>
    <hr />
    {/foreach}
  </div>
{/template}


/**
 * Create the details dialog main content.
 * @param line
 * @param? screenSrc
 */
{template .detailsContent}
<div id="rpf-details-toolbar" class="centered-div">
</div>
<hr>
<div class="centered-div">
  <img src="imgs/rpf/prevpage.png" title="Previous line" id="rpf-prev-line">
  <input type="text" size="1" id="curlineInput" value="{$line}">
  <img src="imgs/rpf/nextpage.png" title="Next line" id="rpf-next-line">
</div>
<div id="rpf-details-screenshot" class="centered-div">
  {if $screenSrc}
    <a href="{$screenSrc}" target="_blank">
      <img src="{$screenSrc}" width="80%">
    </a>
  {/if}
</div>
<div id="rpf-details-editor">
</div>
<div id="rpf-details-moreinfo">
  <h3 class="componentName">More Info</h3>
  <table>
    <tr>
      <td><label for="stepNameInput">Step name</label></td>
      <td><input type="text" id="stepNameInput" name="stepNameInput"></td>
      <td><input type="button" id="saveStepName" value="Save"></td>
    </tr>
    <tr>
      <td><label for="classNameInput">Class name</label></td>
      <td><input type="text" id="classNameInput" name="classNameInput"></td>
      <td><input type="button" id="saveClassName" value="Save"></td>
    </tr>
  </table>
</div>
{/template}


/**
 * Creates the runs and results links.
 * @param links
 */
{template .createRunsAndResultsLinks}
  <div>
    <a href="{$links['runsUrl']}" target="_blank">Runs</a>
    {sp}&{sp}
    <a href="{$links['resultUrl']}" target="_blank">Results</a>
  </div>
{/template}


/**
 * Creates the validation main UI.
 */
{template .createValidationDialog}
  <div id="action-name-in-validation-dialog">
  </div>
  <div id="choiceViewDiv">
  </div>
{/template}


/**
 * Creates the action names div.
 */
{template .createActionNames}
  <h3 class="componentName">Action</h3>
  <div id="actions-select" style="text-align: center;"></div>
{/template}

